<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>招聘</title>
		<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/static/css/app.css" />
	</head>
	
	<body class="bg01">
		<header class="header">
			<h3>{{work_name}}</h3>
			    <a style="position:absolute;top:3px;left:2%;color:white" href="{{ url_for('ind.index')}}">返回</a>
<!--			<form action="/ind2" method="get" >-->
<!--			<input name="" type="submit" value="返回" style="position:absolute;top:0px;"/>-->
<!--			</form>-->
		</header>

		<div class="wrapper">
			<div class="container-fluid">
				<div class="row fill-h">
					<div class="col-lg-3 fill-h" >
						<div class="xpanel-wrapper xpanel-wrapper-4" >
							<div class="xpanel">
								<div class="xpanel1" >
									<p >  毕业月薪走势</p>
								</div>
								<!-- 毕业月薪走势 -->
								<div class="fill-h" id="educated_salary"></div>
									
							</div>
						</div>
						<div class="xpanel-wrapper xpanel-wrapper-3" >
							<div class="xpanel">
								<div class="xpanel1" >
									<p >  企业性质</p>
								</div>
								<!-- 企业类型，外企国企等 -->
								<div class="fill-h" id="company_type"></div>
								
							</div>
						</div>
					</div>
					<div class="col-lg-6 fill-h">
                       <div class="xpanel-wrapper xpanel-wrapper-4">
                          <div class="xpanel">
<!--							<div class="xpanel1" >-->
<!--								<p >  岗位需求数量城市排名</p>-->
<!--							</div>-->
                             <!-- 岗位需求数量城市排名 -->
                             <div class="fill-h" id="worderCity_needed" style="display:block"></div>
<!--				设置一个隐藏的div，鼠标移动进去的时候显示出来-->
							  <div class="fill-h" id="mouse_in" style="display:none"></div>

							  <div class="xpanel2"  id="title" >
								  <span>{{num_count}}个</span>
							  </div>
							  <div class="xpanel1" id="title1" style="position:absolute;top:59%;left:4%" >
								  <p style="position:absolute;left:40%">  岗位需求城市</p>
							  </div>
							  <script>
								  		function giao(){
											document.getElementById("mouse_in").style.display='none';
											document.getElementById("worderCity_needed").style.display='block';
											document.getElementById("return_preP").style.display='none';
											 document.getElementById("title").style.display='block';
											 document.getElementById("title1").style.display='block';
											 console.log('点击了返回原图或者是鼠标离开了div');
											 return false;
										}
							  </script>
							  		<a href="javascript:giao();" id="return_preP" style="display:none;position:absolute;top:3%;left:85%;color:white">返回原图</a>
                          </div>
                       </div>
							<div class="row1 fill-h">
								   <div class="col-lg-6 fill-h">
									  <div class="xpanel-wrapper xpanel-wrapper-3">
										 <div class="xpanel">
											<div class="xpanel1" >
												<p >  公司规模</p>
											</div>
											  <!-- 企业规模 -->
											<div class="fill-h" id="company_workerNum"></div>
											 	
										 </div>
									  </div>
								   </div>
								   <div class="col-lg-6 fill-h">
									  <div class="xpanel-wrapper xpanel-wrapper-3">
										 <div class="xpanel">
											<div class="xpanel1" >
												<p >  学历要求</p>
											</div>
											  <!-- 学历要求 -->
											<div class="fill-h" id="edu_requried"></div>
											 
										 </div>
									  </div>
								   </div>
							</div >
                       </div>
					<div class="col-lg-3 fill-h">
						<div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<div class="xpanel1" >
									<p >  薪资水平</p>
								</div>
								<!-- 薪资水平 -->
								<div class="fill-h" id="avg_salary"></div>
									
							</div>
                        </div>
                        <div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<div class="xpanel1" >
									<p >  技能要求</p>
								</div>
								<!-- 技能词云 -->
								<div class="fill-h" id="skill_wordcloud"></div>
								
							</div>
                        </div>
                        <div class="xpanel-wrapper xpanel-wrapper-3">
							<div class="xpanel">
								<div class="xpanel1" >
									<p >  经验要求</p>
								</div>
								<!-- 经验要求 -->
								<div class="fill-h" id="exp_requried"></div>
									
							</div>
                        </div>

				    </div>
                </div>
			</div>
		</div>
		
		<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/static/js/echarts.min.js"></script>
		<script type="text/javascript" src="/static/js/echarts-wordcloud.min.js"></script>
		<script type="text/javascript" src="/static/js/echarts-map-world.js"></script>
		<script type="text/javascript" src="/static/js/echarts-map-china.js"></script>
		<script type="text/javascript" src="/static/js/echarts-china-provinces/jiangsu.js"></script>
		<script type="text/javascript" src="/static/js/echarts-china-cities/jiang1_su1_su1_zhou1.js"></script>
		<script type="text/javascript" src="/static/js/echarts-china-counties/jiang1su1_su1zhou1_kun1shan1shi4.js"></script>
		<script type="text/javascript">
		<!--		用于ajax请求的字段-->
		var cate2={}
		cate2['cate2']='{{work_name}}'

            $(function(){

<!--绑定鼠标的移入移除事件，mouseenter mouseleave是进入子元素不触发，除了他们还有mouseover，mouseout()是进入子元素也触发-->
				$('.xpanel').on('mouseenter mouseleave',  function(event) {
					$self=$(this);
					if (event.type=='mouseenter') {
						console.log("鼠标进去了")
<!--	捕捉当前鼠标悬浮的图表容器名称-->
						var id=event.currentTarget.children[1].attributes.id.nodeValue
<!--						if (id=="mouse_in"){}-->
<!--						else{-->
                            document.getElementById("worderCity_needed").style.display='none';
                             document.getElementById("mouse_in").style.display='block';
                             document.getElementById("return_preP").style.display='block';
                             document.getElementById("title").style.display='none';
                             document.getElementById("title1").style.display='none';
<!--						}-->
						$.post("/job/"+id,data=cate2,result=>{
								console.log(result)
								if (id=="avg_salary") {
									avg_salary(result['A'],result['B'],"mouse_in")
								} else if (id=="edu_requried") {
									edu_requried(result['A'],result['B'],"mouse_in")
								 }else if (id=="exp_requried") {
									exp_requried(result['A'],result['B'],"mouse_in")
								 } else if (id=="company_workerNum") {
									company_workerNum(result['A'],result['B'],"mouse_in")
								 } else if (id=="company_type") {
									company_type(result['A'],result['B'],"mouse_in")
								 } else if (id=="educated_salary") {
									educated_salary(result['A'],result['B'],"mouse_in")
								 } else if (id=="worderCity_needed") {
									worderCity_needed(result['A'],result['B'],"mouse_in")
								 } else if (id=="skill_wordcloud") {
									skill_wordcloud(result['A'],result['B'],"mouse_in")
								 }  else {}
						})

					}else if(event.type=='mouseleave'){
<!--					执行上面定义的一个函数，作用是恢复原图表-->
						giao()
					}
				});


<!--ajax请求们-->
				$.post("/job/educated_salary",data=cate2,result=>{
						console.log(result)
						educated_salary(result['A'],result['B'],"educated_salary")
					})
				$.post("/job/company_type",data=cate2,result=>{
					console.log(result)
					company_type(result['A'],result['B'],"company_type")
				})
				$.post("/job/company_workerNum",data=cate2,result=>{
					console.log(result)
					company_workerNum(result['A'],result['B'],"company_workerNum")
				})
				$.post("/job/edu_requried",data=cate2,result=>{
					console.log(result)
					edu_requried(result['A'],result['B'],"edu_requried")
				})
				$.post("/job/exp_requried",data=cate2,result=>{
					console.log(result)
					exp_requried(result['A'],result['B'],"exp_requried")
				})
				$.post("/job/skill_wordcloud",data=cate2,result=>{
					console.log(result)
					skill_wordcloud(result['A'],result['B'],"skill_wordcloud")
				})
				$.post("/job/avg_salary",data=cate2,result=>{
						console.log(result)
						avg_salary(result['A'],result['B'],"avg_salary")
				})
				$.post("/job/worderCity_needed",data=cate2,result=>{
					console.log(result)
					worderCity_needed(result['A'],result['B'],"worderCity_needed")
				})


<!--	毕业月薪走势	-->
				educated_salary(["无需经验"],[10],"educated_salary")
				function educated_salary(exp,salary,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
							grid:{  x:'10%',x2:'17%',},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								name:'(年限)',
								nameTextStyle:{color:"DeepSkyBlue"},
								axisLine:{lineStyle:{color:'#275F82'}} ,
								type: 'category',
								data: exp,
								axisLabel : {//坐标轴刻度标签的相关设置。
								interval:0,
								rotate:"25",
								textStyle: {
								color: "DeepSkyBlue"  ,
									},
								}
							},
							yAxis: {
								axisLine:{lineStyle:{color:'#275F82'}} ,
								splitLine: {lineStyle:{color:'#275F82'}},
								type: 'value',
								axisLabel: {
									formatter: '{value}k',
									show: true,
									textStyle: {
									color: "DeepSkyBlue"  ,
									},
								},
							},
							series: [{
								 itemStyle: {
									normal : {
										color:'DeepSkyBlue',
<!--										borderWidth: 3,-->
<!--										lineStyle:{-->
<!--											color:'#247BA0'-->
<!--										}-->
									},
									emphasis:{
										color: 'white',
										borderColor: 'DeepSkyBlue'
									}//***这个字段就是控制鼠标悬浮在圆点上面让整个圆填充满背景色，也可以更改边框颜色等！***
								},
								name: '平均月薪',
								lineStyle: {
									color: 'DeepSkyBlue',
									width: 2
								},
								data:salary,
								type: 'line',
								areaStyle: {
									normal: {
									color: '#275F82' //改变区域颜色
									}
								},
								smooth:true
							}]
						};
					chart.setOption(option);
				}


<!--	薪资水平	-->
				avg_salary(["2k以下"],[10],"avg_salary")
				function avg_salary(salary,each_salaryCount,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var options = {
						tooltip:{trigger: 'axis'},
						grid:{left :'17%',right:'20%',top:'15%', bottom:"15%"},
						xAxis:{
							name:'千(人数)',
							nameTextStyle:{color:"DeepSkyBlue"},
							splitLine: {show: false},
							type:"value",
							axisLine:{lineStyle:{color:'#275F82'}} ,
							axisLabel: {
								show: true,
								textStyle: {
								color: "DeepSkyBlue"  ,
								},
							},
						},
						yAxis:{
							type:"category",
							data:salary,
							axisLine:{lineStyle:{color:'#275F82'}} ,
							axisLabel: {
								interval:0 ,
								show: true,
								textStyle: {
								color: "DeepSkyBlue"  ,
								},
							},
						},
						series:{
							type:"bar",
							name:"人数",
							data:each_salaryCount,
							color:"DeepSkyBlue",
							barWidth : 8,
						}
					};
<!--					chart.showLoading({-->
<!--						text: "图表数据正在努力加载...",-->
<!--						x: "center",-->
<!--						y: "center",-->
<!--						textStyle: {-->
<!--						   color:"red",-->
<!--							fontSize:14-->
<!--						},-->
<!--						effect:"spin"-->
<!--					});-->
					chart.setOption(options);
				}


<!--	学历要求占比	-->
				edu_requried(["本科"],[10],"edu_requried")
				function edu_requried(edu,each_eduCount,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							type: 'scroll',
							top: 20,
							align:'right',
							orient: 'vertical',
							right:'5%',
							data: edu,
							textStyle:{color:'white',fontSize : 10}
						},
						series: [
							{
								stillShowZeroSum :false,
								name: '人数',
								type: 'pie',
								radius: ['20%', '70%'],
								center: ['35%', '60%'],
								roseType: 'radius',
								label: {
									show: false
								},
								emphasis: {
									label: {
										show: true
									}
								},
								data: each_eduCount,
								itemStyle: {
									normal:{
										 color:function(params) {
										 //自定义颜色
										 var colorList = [
												 'DeepSkyBlue','PowderBlue','RoyalBlue','DarkSlateBlue','LightSkyBlue','SteelBlue'
											 ];
											 return colorList[params.dataIndex]
										  }
									}
								 }
							}
						]
					};
					chart.setOption(option);
				}


<!--	经验要求占比	-->

				exp_requried(["无需经验"],[100],"exp_requried")
				function exp_requried(exp,each_expCount,ElementId)
				{											//改动
					var chart = echarts.init(document.getElementById(ElementId));
					chart.clear();
					var option = {
						tooltip:{trigger: 'axis'},
						angleAxis: {
							axisTick:{interval :0},
							show:false,
							max: function (value) {    //设置圈坐标轴的最大值为数据里面最大值的两倍，这样柱子就不会超过中间
								 return value.max *2;
							}
						},
						radiusAxis: {
							splitLine:{show:true,lineStyle:{color:'#275F82'}},  //背景圆圈线
						    axisTick:{alignWithLabel:true},
							type: 'category',
							data: exp,
							z: 10,
							axisLabel: {
								interval : 0,
								show: true,
								textStyle: {
								color: "white"  ,
								},
							},

						},
						polar: {
						      center :['50%', '55%'],
        					 radius:"90%"
						},
						series: [{
							type: 'bar',
							data: each_expCount,
							coordinateSystem: 'polar',
							name: '人数',
							color:"DeepSkyBlue",
							barWidth:"50%",

						}],
						legend: {
							show: false,
							data: ['A']
						}
					};
					chart.setOption(option);
				}


<!--	公司规模	-->
				company_workerNum("高中/中技/中专",{value: 8, name: '高中/中技/中专'},"company_workerNum")
				function company_workerNum(cnum,each_cnumCount,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
						tooltip: {},
						legend: {
							show:false
						},
						radar: {
							// shape: 'circle',
							radius :'60%',
							center:['50%','55%'],
							name: {
								textStyle: {
									color: 'white',
									fontSize : 11
<!--									borderRadius: 1,-->
<!--									padding: [1, 2]-->
								}
							},
							 axisLine: {
								lineStyle: {
									color: '#275F82',
									},
							},
							indicator: cnum,
							splitArea : {
								show : true,
								areaStyle : {
								   color: ['rgba(0,88,155,0.3)',]
								   // 图表背景网格的颜色
									}
								},
								splitLine : {
								   show : true,
								   lineStyle : {
									   width : 1,
									   color : ['#275F82']
									   // 图表背景网格线的颜色
									}
								}
						},
						series: [{
							type: 'radar',
							areaStyle: {normal: {color: "DeepSkyBlue" }},
							data: [
								{
									value:each_cnumCount ,
									itemStyle: {
										normal: {
											color: 'DeepSkyBlue',
											lineStyle: {
												color: 'DeepSkyBlue',
											},
										},
									},

								}
							]
						}]
					};
					chart.setOption(option);
				}

<!--	企业性质	-->
				company_type("民营公司",[10],"company_type")
				function company_type(ctype,each_ctypeCount,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							type: 'scroll',
							top: 20,
							align:'left',
							orient: 'vertical',
							left:'5%',
							data: ctype,
							textStyle:{color:'white',fontSize : 10}
						},
						series: [
							{
								stillShowZeroSum :false,
								name: '公司数量',
								type: 'pie',
								radius: ['20%', '70%'],
								center: ['65%', '60%'],
								roseType: 'radius',
								label: {
									show: false
								},
								emphasis: {
									label: {
										show: true
									}
								},
								 itemStyle: {
									normal:{
										 color:function(params) {
										 //自定义颜色
										 var colorList = [
												 'DeepSkyBlue','PowderBlue','RoyalBlue','DarkSlateBlue','LightSkyBlue','SteelBlue'
											 ];
											 return colorList[params.dataIndex]
										  }
									}
								 },
								data: each_ctypeCount
							}
						]
					};

					chart.setOption(option);
				}


<!--	岗位需求前十	-->
				worderCity_needed(["广州"],[10],"worderCity_needed")
				function worderCity_needed(city,worder_num,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
					    	grid: {
								top:'40%'
							},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								name:'(城市)',
								axisLine:{lineStyle:{color:'#275F82'}} ,
								nameTextStyle:{color:"DeepSkyBlue"},
								type: 'category',
								data: city,
								axisLabel : {//坐标轴刻度标签的相关设置。
									interval:0,
									textStyle: {
										color: "DeepSkyBlue" ,
									},
								},
							},
							yAxis: {
								axisLine:{lineStyle:{color:'#275F82'}} ,
								splitLine: {lineStyle:{color:'#275F82'}},
								name:'(人数)',
								nameTextStyle:{color:"DeepSkyBlue"},
								type: 'value',
								axisLabel: {
								formatter: '{value}',
								show: true,
								textStyle: {
								color: "DeepSkyBlue"  ,
								},
							},
							},
							series: [{
								itemStyle: {
									normal : {color:'DeepSkyBlue',},
									emphasis:{
										color: 'white',
										borderColor: 'DeepSkyBlue'
									}//***这个字段就是控制鼠标悬浮在圆点上面让整个圆填充满背景色，也可以更改边框颜色等！***
								},
							 	name: '招聘人数',
								lineStyle: {
									color: 'DeepSkyBlue',
									width: 2
								},
								data:worder_num,
								type: 'line',
								areaStyle: {
									normal: {
									color: '#275F82' //改变区域颜色
									}
								},
								smooth:true,
								label: {
									normal: {
										show: true,
										position: 'top',
										textStyle:{color:"white"}
									}
								},
							}]
						};
					chart.setOption(option);
				}


<!--	岗位技能词云 -->
				skill_wordcloud({name:'hello',value:200},"nothing","skill_wordcloud")
				function skill_wordcloud(word_cloud_data,nothing,id)
				{
					var chart = echarts.init(document.getElementById(id));
					chart.clear();
					var option = {
							tooltip: {},
							series: [ {
								type: 'wordCloud',
<!--								textPadding: 0,-->
								gridSize: 0,  //字符之间的间距(int)
<!--								autoSize: {-->
<!--									enable: true,-->
<!--									 minSize: 10-->
<!--								 },-->
								sizeRange: [11,30],  //字符的范围(array)
								rotationRange: [-20,20],  //字符倾斜的角度(array)
<!--								shape: 'pentagon',-->
								width: '70%',   //字符云画布宽度
								height:  '90%',
<!--								drawOutOfBound: true,-->
								textStyle: {
									normal: {
										fontFamily: '微软雅黑',
										color: function () {
											var colors =['DodgerBlue','HotPink','DeepPink','Cyan','MediumSpringGreen','Gold','Orange','FireBrick','DarkGoldenrod'];
											return colors[parseInt(Math.random() * 10)];
										}
									},
									emphasis: {
										shadowBlur: 10,
										shadowColor: '#333'
									}
								},
								data:word_cloud_data
							} ]
					};
					 //词云背景图：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
<!--					var maskImage = new Image();-->
<!--					maskImage.src = '../static/img/wordClod_bkgroud.png';-->
<!--					maskImage.onload = function(){-->
						chart.setOption(option);
<!--					};-->
				}
            });



		</script>
	</body>
</html>